<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>微信商城管理系统 - 控制台</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@3.2.31/dist/vue.global.min.js"></script>
    <!-- 字体图标 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <!-- 图表库 -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        [v-cloak] { display: none; }
    </style>
</head>
<body class="bg-gray-100">
    <div id="app" v-cloak class="flex h-screen overflow-hidden">
        <!-- 侧边栏 -->
        <div :class="['bg-gray-900 text-white w-64 flex flex-col transition-all duration-300 ease-in-out', isSidebarOpen ? 'translate-x-0' : '-translate-x-64 md:translate-x-0']">
            <!-- 侧边栏头部 -->
            <div class="flex items-center justify-between px-4 py-3 bg-gray-800">
                <div class="flex items-center">
                    <img src="https://via.placeholder.com/40" alt="Logo" class="h-8 w-8 rounded-full">
                    <span class="ml-2 text-xl font-semibold">商城管理系统</span>
                </div>
                <button @click="toggleSidebar" class="md:hidden text-gray-300 hover:text-white">
                    <i class="bi bi-x-lg"></i>
                </button>
            </div>
            
            <!-- 侧边栏菜单 -->
            <nav class="flex-1 overflow-y-auto py-4">
                <ul class="space-y-1">
                    <li>
                        <a href="dashboard.html" class="flex items-center px-4 py-2 bg-gray-700 text-white">
                            <i class="bi bi-speedometer2 mr-3"></i>
                            <span>控制台</span>
                        </a>
                    </li>
                    <li>
                        <a href="products.html" class="flex items-center px-4 py-2 text-gray-300 hover:bg-gray-700 hover:text-white">
                            <i class="bi bi-box-seam mr-3"></i>
                            <span>商品管理</span>
                        </a>
                    </li>
                    <li>
                        <a href="categories.html" class="flex items-center px-4 py-2 text-gray-300 hover:bg-gray-700 hover:text-white">
                            <i class="bi bi-tags mr-3"></i>
                            <span>分类管理</span>
                        </a>
                    </li>
                    <li>
                        <a href="orders.html" class="flex items-center px-4 py-2 text-gray-300 hover:bg-gray-700 hover:text-white">
                            <i class="bi bi-cart3 mr-3"></i>
                            <span>订单管理</span>
                        </a>
                    </li>
                    <li>
                        <a href="inventory.html" class="flex items-center px-4 py-2 text-gray-300 hover:bg-gray-700 hover:text-white">
                            <i class="bi bi-clipboard-data mr-3"></i>
                            <span>库存管理</span>
                        </a>
                    </li>
                    <li>
                        <a href="statistics.html" class="flex items-center px-4 py-2 text-gray-300 hover:bg-gray-700 hover:text-white">
                            <i class="bi bi-graph-up mr-3"></i>
                            <span>数据统计</span>
                        </a>
                    </li>
                    <li>
                        <a href="settings.html" class="flex items-center px-4 py-2 text-gray-300 hover:bg-gray-700 hover:text-white">
                            <i class="bi bi-gear mr-3"></i>
                            <span>系统设置</span>
                        </a>
                    </li>
                </ul>
            </nav>
            
            <!-- 侧边栏底部 -->
            <div class="p-4 bg-gray-800">
                <div class="flex items-center">
                    <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="用户头像" class="h-8 w-8 rounded-full">
                    <div class="ml-3">
                        <p class="text-sm font-medium text-white">管理员</p>
                        <p class="text-xs text-gray-300">admin@example.com</p>
                    </div>
                </div>
                <div class="mt-3">
                    <a href="login.html" class="flex items-center justify-center px-4 py-2 text-sm text-white bg-gray-700 rounded-md hover:bg-gray-600">
                        <i class="bi bi-box-arrow-left mr-2"></i>
                        退出登录
                    </a>
                </div>
            </div>
        </div>
        
        <!-- 主内容区 -->
        <div class="flex-1 flex flex-col overflow-hidden">
            <!-- 顶部导航栏 -->
            <header class="bg-white border-b border-gray-200 shadow-sm">
                <div class="flex items-center justify-between px-4 py-3">
                    <div class="flex items-center">
                        <button @click="toggleSidebar" class="text-gray-500 focus:outline-none md:hidden">
                            <i class="bi bi-list text-xl"></i>
                        </button>
                        <h1 class="ml-4 text-lg font-semibold text-gray-700">控制台</h1>
                    </div>
                    <div class="flex items-center space-x-4">
                        <button class="text-gray-500 hover:text-gray-600 focus:outline-none">
                            <i class="bi bi-bell"></i>
                            <span class="absolute top-1 right-1 inline-block w-2 h-2 bg-red-500 rounded-full"></span>
                        </button>
                        <button class="flex items-center text-gray-500 hover:text-gray-600 focus:outline-none">
                            <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="用户头像" class="h-8 w-8 rounded-full">
                            <span class="ml-2 text-sm font-medium">管理员</span>
                            <i class="bi bi-chevron-down ml-1"></i>
                        </button>
                    </div>
                </div>
            </header>
            
            <!-- 页面内容 -->
            <main class="flex-1 overflow-y-auto p-4">
                <!-- 欢迎卡片 -->
                <div class="bg-white rounded-lg shadow p-4 mb-6">
                    <div class="flex items-center">
                        <div class="rounded-full bg-blue-500 p-3">
                            <i class="bi bi-person-check text-white text-xl"></i>
                        </div>
                        <div class="ml-4">
                            <h2 class="text-xl font-semibold">欢迎回来，管理员</h2>
                            <p class="text-gray-500">最近登录时间: {{ lastLoginTime }}</p>
                        </div>
                    </div>
                </div>
                
                <!-- 主要统计卡片 -->
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
                    <!-- 总销售额 -->
                    <div class="bg-white rounded-lg shadow p-4">
                        <div class="flex items-center justify-between mb-2">
                            <h3 class="text-gray-500 text-sm font-medium">总销售额</h3>
                            <span class="rounded-full bg-green-100 p-2">
                                <i class="bi bi-currency-yen text-green-500"></i>
                            </span>
                        </div>
                        <div class="flex items-baseline">
                            <span class="text-2xl font-bold">¥{{ formatNumber(totalSales) }}</span>
                            <span class="ml-2 text-sm text-green-500">
                                <i class="bi bi-arrow-up"></i>
                                {{ salesGrowth }}%
                            </span>
                        </div>
                        <div class="text-gray-400 text-xs mt-2">
                            较上月增长 {{ salesGrowth }}%
                        </div>
                    </div>
                    
                    <!-- 订单数量 -->
                    <div class="bg-white rounded-lg shadow p-4">
                        <div class="flex items-center justify-between mb-2">
                            <h3 class="text-gray-500 text-sm font-medium">订单数量</h3>
                            <span class="rounded-full bg-blue-100 p-2">
                                <i class="bi bi-cart text-blue-500"></i>
                            </span>
                        </div>
                        <div class="flex items-baseline">
                            <span class="text-2xl font-bold">{{ totalOrders }}</span>
                            <span class="ml-2 text-sm text-blue-500">
                                <i class="bi bi-arrow-up"></i>
                                {{ orderGrowth }}%
                            </span>
                        </div>
                        <div class="text-gray-400 text-xs mt-2">
                            较上月增长 {{ orderGrowth }}%
                        </div>
                    </div>
                    
                    <!-- 用户数量 -->
                    <div class="bg-white rounded-lg shadow p-4">
                        <div class="flex items-center justify-between mb-2">
                            <h3 class="text-gray-500 text-sm font-medium">用户数量</h3>
                            <span class="rounded-full bg-purple-100 p-2">
                                <i class="bi bi-people text-purple-500"></i>
                            </span>
                        </div>
                        <div class="flex items-baseline">
                            <span class="text-2xl font-bold">{{ totalUsers }}</span>
                            <span class="ml-2 text-sm text-purple-500">
                                <i class="bi bi-arrow-up"></i>
                                {{ userGrowth }}%
                            </span>
                        </div>
                        <div class="text-gray-400 text-xs mt-2">
                            较上月增长 {{ userGrowth }}%
                        </div>
                    </div>
                    
                    <!-- 商品总数 -->
                    <div class="bg-white rounded-lg shadow p-4">
                        <div class="flex items-center justify-between mb-2">
                            <h3 class="text-gray-500 text-sm font-medium">商品总数</h3>
                            <span class="rounded-full bg-yellow-100 p-2">
                                <i class="bi bi-box text-yellow-500"></i>
                            </span>
                        </div>
                        <div class="flex items-baseline">
                            <span class="text-2xl font-bold">{{ totalProducts }}</span>
                        </div>
                        <div class="text-gray-400 text-xs mt-2">
                            {{ outOfStockProducts }} 个商品库存不足
                        </div>
                    </div>
                </div>
                
                <!-- 图表区域 -->
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
                    <!-- 销售趋势图 -->
                    <div class="bg-white rounded-lg shadow p-4">
                        <div class="flex items-center justify-between mb-4">
                            <h3 class="text-lg font-semibold">销售趋势</h3>
                            <div>
                                <select v-model="salesPeriod" class="text-sm border-gray-300 rounded-md">
                                    <option value="week">本周</option>
                                    <option value="month">本月</option>
                                    <option value="year">本年</option>
                                </select>
                            </div>
                        </div>
                        <div class="h-60">
                            <canvas id="salesChart"></canvas>
                        </div>
                    </div>
                    
                    <!-- 热门商品 -->
                    <div class="bg-white rounded-lg shadow p-4">
                        <div class="flex items-center justify-between mb-4">
                            <h3 class="text-lg font-semibold">热门商品</h3>
                            <a href="products.html" class="text-sm text-blue-500 hover:text-blue-700">查看全部</a>
                        </div>
                        <div class="h-60">
                            <canvas id="productsChart"></canvas>
                        </div>
                    </div>
                </div>
                
                <!-- 最新订单 -->
                <div class="bg-white rounded-lg shadow overflow-hidden mb-6">
                    <div class="px-4 py-3 border-b border-gray-200">
                        <div class="flex items-center justify-between">
                            <h3 class="text-lg font-semibold">最新订单</h3>
                            <a href="orders.html" class="text-sm text-blue-500 hover:text-blue-700">查看全部</a>
                        </div>
                    </div>
                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">订单号</th>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">用户</th>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">金额</th>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">下单时间</th>
                                    <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200">
                                <tr v-for="order in latestOrders" :key="order.id">
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{ order.orderNo }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ order.user }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">¥{{ formatNumber(order.amount) }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span :class="[
                                            'px-2 inline-flex text-xs leading-5 font-semibold rounded-full',
                                            order.status === '待付款' ? 'bg-yellow-100 text-yellow-800' :
                                            order.status === '待发货' ? 'bg-blue-100 text-blue-800' :
                                            order.status === '待收货' ? 'bg-purple-100 text-purple-800' :
                                            order.status === '已完成' ? 'bg-green-100 text-green-800' :
                                            'bg-red-100 text-red-800'
                                        ]">
                                            {{ order.status }}
                                        </span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ order.createTime }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                        <a href="#" class="text-indigo-600 hover:text-indigo-900">查看</a>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </main>
            
            <!-- 底部 -->
            <footer class="bg-white border-t border-gray-200 px-4 py-3">
                <div class="text-center text-sm text-gray-500">
                    © 2023 微信商城后台管理系统 版权所有
                </div>
            </footer>
        </div>
    </div>

    <script>
        const { createApp, ref, onMounted } = Vue
        
        createApp({
            setup() {
                // 侧边栏状态
                const isSidebarOpen = ref(false)
                
                // 最近登录时间
                const lastLoginTime = ref('2023-07-15 08:30:45')
                
                // 统计数据
                const totalSales = ref(125680)
                const salesGrowth = ref(12.5)
                const totalOrders = ref(1568)
                const orderGrowth = ref(8.2)
                const totalUsers = ref(3265)
                const userGrowth = ref(15.3)
                const totalProducts = ref(526)
                const outOfStockProducts = ref(12)
                
                // 销售周期
                const salesPeriod = ref('month')
                
                // 最新订单
                const latestOrders = ref([
                    { id: 1, orderNo: 'ORD-2023071501', user: '张三', amount: 1280, status: '待发货', createTime: '2023-07-15 10:20:30' },
                    { id: 2, orderNo: 'ORD-2023071502', user: '李四', amount: 850, status: '待付款', createTime: '2023-07-15 09:45:12' },
                    { id: 3, orderNo: 'ORD-2023071503', user: '王五', amount: 2500, status: '已完成', createTime: '2023-07-15 08:30:45' },
                    { id: 4, orderNo: 'ORD-2023071504', user: '赵六', amount: 760, status: '待收货', createTime: '2023-07-14 18:20:10' },
                    { id: 5, orderNo: 'ORD-2023071505', user: '钱七', amount: 1950, status: '已取消', createTime: '2023-07-14 16:15:30' }
                ])
                
                // 格式化数字
                function formatNumber(num) {
                    return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
                }
                
                // 切换侧边栏
                function toggleSidebar() {
                    isSidebarOpen.value = !isSidebarOpen.value
                }
                
                // 初始化图表
                function initCharts() {
                    // 销售趋势图
                    const salesCtx = document.getElementById('salesChart').getContext('2d')
                    new Chart(salesCtx, {
                        type: 'line',
                        data: {
                            labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
                            datasets: [{
                                label: '销售额',
                                data: [12500, 15600, 14800, 16200, 18500, 21000, 22500],
                                borderColor: 'rgb(59, 130, 246)',
                                backgroundColor: 'rgba(59, 130, 246, 0.1)',
                                tension: 0.3,
                                fill: true
                            }]
                        },
                        options: {
                            responsive: true,
                            maintainAspectRatio: false,
                            plugins: {
                                legend: {
                                    display: false
                                }
                            },
                            scales: {
                                y: {
                                    beginAtZero: true
                                }
                            }
                        }
                    })
                    
                    // 热门商品图表
                    const productsCtx = document.getElementById('productsChart').getContext('2d')
                    new Chart(productsCtx, {
                        type: 'doughnut',
                        data: {
                            labels: ['手机', '电脑', '服装', '食品', '其他'],
                            datasets: [{
                                data: [35, 25, 20, 15, 5],
                                backgroundColor: [
                                    'rgba(59, 130, 246, 0.8)',
                                    'rgba(16, 185, 129, 0.8)',
                                    'rgba(249, 115, 22, 0.8)',
                                    'rgba(217, 70, 239, 0.8)',
                                    'rgba(107, 114, 128, 0.8)'
                                ]
                            }]
                        },
                        options: {
                            responsive: true,
                            maintainAspectRatio: false,
                            plugins: {
                                legend: {
                                    position: 'right'
                                }
                            }
                        }
                    })
                }
                
                onMounted(() => {
                    initCharts()
                })
                
                return {
                    isSidebarOpen,
                    lastLoginTime,
                    totalSales,
                    salesGrowth,
                    totalOrders,
                    orderGrowth,
                    totalUsers,
                    userGrowth,
                    totalProducts,
                    outOfStockProducts,
                    salesPeriod,
                    latestOrders,
                    formatNumber,
                    toggleSidebar
                }
            }
        }).mount('#app')
    </script>
</body>
</html> 